import React, { useState, useEffect, useLayoutEffect } from 'react';
import { StyleSheet, View, Text, Button, Image, FlatList, TouchableOpacity } from 'react-native';
import { AntDesign,Feather } from '@expo/vector-icons';
const list1 = [
    { key: '1', src: require('../images/child_one.png'), child_name: '李慧娟' },
    { key: '2', src: require('../images/child_one.png'), child_name: '李慧娟' },
    { key: '3', src: require('../images/child_one.png'), child_name: '李慧娟' }
]
const list2 = [
    { key: '4', src: require('../images/child_two.png'), child_name: '方梦梦' },
    { key: '5', src: require('../images/child_two.png'), child_name: '方梦梦' },
    { key: '6', src: require('../images/child_two.png'), child_name: '方梦梦' }
]
const Efamily = ({  navigation }) => {
    useLayoutEffect(() => {
        navigation.setOptions({
            headerBackVisible: false,
            headerLeft:()=>{
                return <AntDesign name="left" size={24} color="white" onPress={
                    ()=>{
                        navigation.navigate('Home')
                    }
                }/>
            },
            headerRight: () => {
                return <Feather name="more-horizontal" size={24} color='white' />
            },
            headerTitle: () => {
                return <Text style={{ color: 'white', fontSize: 20 }}>E族爱心</Text>
            }
        })
    }, [])
    return <View style={styles.container}>
        {/**列表部分 */}
        <View style={styles.list}>
            {/**左列表 */}
            <View style={styles.list_item}>
                <FlatList
                    data={list1}
                    renderItem={({ item }) => {
                        return <View style={styles.li}>
                            <Image source={item.src} style={{ width: width(171), height: height(171) }} />
                            <Text style={styles.li_text}>受捐人：{item.child_name}</Text>
                        </View>

                    }}
                    keyExtractor={item => item.key}
                />
                <TouchableOpacity style={styles.btn1}>
                    <Text style={styles.btn1_text}>上一页</Text>
                </TouchableOpacity>
            </View>
            {/**右列表 */}
            <View style={styles.list_item}>
                <FlatList
                    data={list2}
                    renderItem={({ item }) => {
                        return <View style={styles.li}>
                            <Image source={item.src} style={{ width: width(171), height: height(171) }} />
                            <Text style={styles.li_text}>受捐人：{item.child_name}</Text>
                        </View>
                    }}
                    keyExtractor={item => item.key}
                />
                <TouchableOpacity style={styles.btn1}>
                    <Text style={styles.btn1_text}>下一页</Text>
                </TouchableOpacity>
            </View>
        </View>
        <TouchableOpacity style={styles.btn2}>
            <Text style={styles.btn2_text}>我要推荐</Text>
        </TouchableOpacity>
    </View>

}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#eee',
        width: width(640),
        height: height(1186),
    },
    list: {
        width: width(640),
        height: height(985),
        flexDirection: 'row',
        backgroundColor: 'white'
    },
    list_item: {
        width: width(320),
        height: height(985),
    },
    li: {
        width: width(320),
        height: height(284),
        justifyContent: 'center',
        alignItems: 'center'
    },
    li_text: {
        color: 'white',
        width: width(158),
        height: height(42),
        backgroundColor: '#ffb848',
        textAlign: 'center',
        textAlignVertical: 'center',
        position: 'relative',
        top: 20
    },
    btn1: {
        width: width(140),
        height: height(42),
        backgroundColor: '#f23030',
        borderRadius: 5,
        marginBottom: height(30),
        alignSelf: 'center'
    },
    btn1_text: {
        height: height(42),
        color: 'white',
        textAlign: 'center',
        textAlignVertical: 'center',
    },
    btn2: {
        width: width(540),
        height: height(60),
        backgroundColor: '#f23030',
        borderRadius: 5,
        alignSelf: 'center',
        marginTop:10
    },
    btn2_text: {
        fontWeight:'bold',
        height: height(60),
        color: 'white',
        textAlign: 'center',
        textAlignVertical: 'center',
    }
});
export default Efamily